<template>
	<view class="main">
		<view v-bind:class="addStyle">
			<view class="add-item" @tap="getImg">
				<image src="@/static/icon/image.png" class="add-img"></image>
				<text>图片</text>
			</view>
			<view class="add-item" @tap="showEditor">
				<image src="@/static/icon/text.png" class="add-img"></image>
				<text>文字</text>
			</view>
			<view class="add-item" @tap="getVideo">
				<image src="@/static/icon/video.png" class="add-img"></image>
				<text>视频</text>
			</view>
			<view class="add-item" @tap="getRecord">
				<image src="@/static/icon/record.png" class="add-img"></image>
				<text>录音</text>
			</view>
			<view class="add-side-item">
				<switch class="swiper" color="#efb336" @change="isCheckedWork = !isCheckedWork"></switch>
				<view class="swiper-text">音</br>频</br>作</br>业</view>
			</view>
		</view>
		<view v-bind:class="arrowStyle"></view>
		<view class="selector" :style="{backgroundColor: theme.primary}" @tap="changeAdd" @longtap="longTap">
			<image src="@/static/icon/add.png" class="icon-button"></image>
		</view>
		<record-ui 
			v-if="showRecord" 
			:Id="Id"
			@cancel="cancelRecord"
			@save="saveRecord">
		</record-ui>
	</view>
</template>

<script>
	import popUi from '@/components/min-popup/min-popup.vue'
	import recordUi from '@/components/record-ui/recordVoice.vue'
	export default{
		name:'addBtn',
		components:{
			popUi,
			recordUi
		},
		props:{
			isActive:Boolean,
			Id: String
		},
		data(){
			return{
				theme: this.$theme,
				addStyle: ['add-detial'],
				arrowStyle: ['add-arrow'],
				showRecord: false,
				videoLength: 0,
				isCheckedWork: false,
				//视频上传前是否追加文字提示
				isVtips: true,
				//音频上传前是否追加文字提示
				isAtips: true
			}
		},
		watch:{
			isCheckedWork(e){
				this.$emit('checkedWork', e)
			}
		},
		computed:{
			videoAlertMessage:function(){
				return function(e){
					if(e>60){
						let str = `${e/60}`
						let min = str
						if(str.indexOf('.') != -1){
							min = str.substring(0, str.indexOf('.'))
						}
						let sec = e - min*60
						if(sec > 0){
							return `注意：请不要选择时长超过${min}分钟${sec}秒的视频哦`
						}
						return `注意：请不要选择时长超过${min}分钟的视频哦`
					}else{
						return `注意：请不要选择时长超过${e}秒的视频哦`
					}
				}
			},
			audioAlertMessage:function(){
				return function(e){
					if(e>60){
						let str = `${e/60}`
						let min = str
						if(str.indexOf('.') != -1){
							min = str.substring(0, str.indexOf('.'))
						}
						let sec = e - min*60
						if(sec > 0){
							return `注意：请不要录制时长超过${min}分钟${sec}秒的音频哦`
						}
						return `注意：请不要录制时长超过${min}分钟的音频哦`
					}else{
						return `注意：请不要录制时长超过${e}秒的音频哦`
					}
				}
			}
		},
		created() {
			this.$http.request({
				url: 'api/Essay/GetEssayConfig',
				method: 'GET',
				data:{
					EssayType: 2
				}
			}).then(resp=>{
				this.videoLength = resp.videoLength
			})
		},
		methods: {
			//获取图片
			getImg(){
				let that = this
				uni.chooseImage({
				    count: 8,
				    sizeType:['copressed'],
					sourceType: ['album'],
				    success(resp) {
						that.$emit('getImge', resp.tempFilePaths)
						that.changeAdd()
				    }
				})
			},
			//获取视频
			getVideo(){
				if(this.isVtips){
					let that = this
					uni.showModal({
						title: '提示',
						content: this.videoAlertMessage(this.videoLength),
						cancelText: '不再提示',
						confirmText: '确定',
						success: function(res){
							if(!res.confirm){
								that.isVtips = false
							}
							that.chooseVideo()
						}
					})
				}else{
					this.chooseVideo()
				}
			},
			//选择视频
			chooseVideo(){
				let that = this
				uni.chooseVideo({
				    count: 1,
				    sourceType: ['album'],
					maxDuration: 30,
				    success: function (resp) {
						if(resp.duration > that.videoLength){
							uni.showToast({
							    title: '上传失败,选择的视频不要太长哦',
								icon: 'none',
							    duration: 1200
							})
						}else{
							that.$emit('getVideo', resp.tempFilePath)
						}
						that.changeAdd()
				    }
				})
			},
			//编辑富文本
			showEditor(){
				this.changeAdd()
				this.$emit('showEditor')
			},
			//录音
			getRecord(){
				if(this.isAtips){
					let that = this
					uni.showModal({
						title: '提示',
						content: this.audioAlertMessage(this.videoLength),
						cancelText: '不再提示',
						confirmText: '确定',
						success: function(res){
							if(!res.confirm){
								that.isAtips = false
							}
							that.$emit('showCover')
							that.showRecord = true
						}
					})
				}else{
					this.$emit('showCover')
					this.showRecord = true
				}
				this.changeAdd()
			},
			//取消录音
			cancelRecord(){
				this.$emit('closeCover')
				this.showRecord = false
			},
			//结束录音
			saveRecord(e){
				this.$emit('closeCover')
				this.$emit('getRecord', e)
				this.showRecord = false
			},
			//长按
			longTap(){
				this.$emit('longTapBtn')
			},
			//操作按钮动画
			changeAdd(){
				// add-detial
				let index = this.addStyle.indexOf('add-detial-change')
				if(this.isActive){
					this.addStyle = ['add-detial']
					this.arrowStyle = ['add-arrow']
					return
				}
				if(index == -1){
					this.addStyle.push('add-detial-change')
					this.arrowStyle = ['add-arrow', 'add-arrow-change']
				}else{
					this.addStyle.splice(index, 1)
					this.arrowStyle = ['add-arrow']
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100vw;
		.selector{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: 0.2s;
			.icon-button{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				position: relative;
				top: -30rpx;
				transition: 0.3s;
			}
		}
		.selector:active{
			opacity: 0.5;
			height: 130rpx;
			width: 320rpx;
		}
		.add-detial{
			width: 0;
			height: 0;
			background-color: transparent;
			box-shadow: none;
			border-radius: 10rpx;
			position: relative;
			bottom: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 10rpx;
			transition: 0.3s;
			.add-item{
				display: none;
				font-size: 0;
				transition: 0.5s;
				.add-img{
					width: 0;
					height: 0;
					transition: 0.5s;
				}
			}
			.add-side-item{
				display: none;
				font-size: 0;
				transition: 0.5s;
				.swiper{
					transform: rotate(90deg) scale(0);
					transition: 0.5s;
				}
				.swiper-text{
					font-size: 0;
					transition: 0.5s;
				}
			}
		}
		.add-detial-change{
			width: 480rpx;
			height: 100rpx;
			background-color: #fff;
			box-shadow: 0 0 8rpx 1rpx #e3e3e3;
			padding: 20rpx 0 20rpx 0;
			.add-item{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 25rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				.add-img{
					width: 50rpx;
					height: 50rpx;
				}
			}
			.add-item:hover{
				background-color: #eaeaea;
			}
			.add-side-item{
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				.swiper{
					transform: rotate(90deg) scale(0.75);
				}
				.swiper-text{
					position: relative;
					left: -25rpx;
					font-size: 23rpx;
				}
			}
			.add-side-item::before{
				content: "";
				width: 0;
				height: 90rpx;
				border-left: 3rpx solid #d5d5d5;
				position: absolute;
				left: 10rpx;
			}
		}
		.add-arrow{
			width: 0;
			height: 0;
			border-top: 20rpx solid transparent;
			border-left: 0 solid transparent;
			border-right: 0 solid transparent;
			border-bottom: 20rpx solid transparent;
			position: absolute;
			bottom: 135rpx;
			transition: 0.3s;
		}
		.add-arrow-change{
			border-top: 20rpx solid #fff;
			border-left: 15rpx solid transparent;
			border-right: 15rpx solid transparent;
		}
	}

</style>
